<template>
  <div>
    
    <!-- 顶部组件 -->
    <header-nav></header-nav>
    <!-- 轮播图 -->
    <div class="banner">
      <div class="imgs">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item,index) in imgs" :key="index">
            <img :src="item.pic" />
          </van-swipe-item>
        </van-swipe>
      </div>
    </div>

    <!-- 推荐歌单 -->
    <div class="remLists">
      <div class="title">推荐歌单</div>
      <div class="content">
        <ul>
          <li v-for="item in Personalizedr" :key="item.id" >
            <router-link class="img1" tag="div" :to="'./rank/ranklist?id='+item.id">
              <img
                :src="item.picUrl"
              />
            </router-link>
            <p>{{item.name}}</p>
            <span><i class="iconfont icon-24gf-headphones"></i>{{ item.playCount | playCountData }}</span>
          </li>
        </ul>
      </div>
    </div>

    <!-- 底部组件 -->
    <bottom-nav></bottom-nav>

  </div>
</template>

<script>
import {getBanner,getPersonalizedr} from "../api/recommend";
import headerNav from "../components/base/headerNav.vue";
import bottomNav from "../components/base/bottomNav.vue";
// https://3.swiper.com.cn/demo/index.html
import Swiper from 'swiper';


export default {
  data(){
    return {
      imgs:null,
      Personalizedr:null
    }
  },
  methods:{
    getBannerFun(){
      getBanner().then(data=>{
        this.imgs = data.banners
      })
    },
    getPersonalizedrFun(){
      getPersonalizedr().then(data=>{
        console.log(data);
        this.Personalizedr = data.result;
      })
    }
  },
  created(){
    this.getBannerFun(); //获取轮播图
    this.getPersonalizedrFun(); //获取推荐歌单
  },
  components:{
    headerNav,
    bottomNav,
  },
  // 过滤器
  filters:{
    playCountData(value){
      let w = value > 10000? value / 10000 : value; // 万计算
      let y = w > 10000? parseInt(value/10000)+"亿": parseInt(w) + "万";//亿计算
      return y;
    }
  },
  mounted(){
    new Swiper('.swiper-container-01', {
        // pagination: '.swiper-pagination-01',
        slidesPerView: 4,  //显示个数
        paginationClickable: true,
        observer:true,
        observeParents:true
        // spaceBetween: 30 //div之间间距
    });
    new Swiper('.swiper-container-02', {
        pagination: '.swiper-pagination-02',
        slidesPerView: 3,
        spaceBetween: 30,
        observer:true,
        observeParents:true
    });
  }

};
</script>

<style lang="less">
.banner {
  &::before {
    content: "";
    display: block;
    height: 124px;
    background-color: #e2bdb4;
    position: absolute;
    width: 100%;
    z-index: -1;
  }
  position: relative;
  .imgs {
    position: relative;
    left: 0px;
    right: 0px;
    top: 0px;
    margin: auto;
    width: 96%;
    border-radius: 4px;
    overflow: hidden;
    img {
      width: 100%;
    }
  }
}

.remLists {
  .title {
    height: 60px;
    line-height: 60px;
    text-indent: 5px;
    font-size: 16px;
    color: #000;
    font-weight: bold;
  }
  .content {
    ul {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      li {
        flex: 0 0 32%;
        position: relative;
        span {
          position: absolute;
          top: 0px;
          right: 0px;
          color: #fff;
          font-size: 10px;
          i {
            font-size: 15px;
            vertical-align: middle;
          }
        }
        .img1 {
          background-color: aqua;
          min-height: 50px;
          width: 100%;
          border-radius: 3px;
          img {
            width: 100%;
            border-radius: 3px;
          }
        }
        p {
          font-size: 12px;
          color: #565658;
          line-height: 15px;
          padding: 5px;
          margin-bottom: 10px;
          height: 26px;
          overflow: hidden;
        }
      }
    }
  }
}
.swiper-slide.item{
  height: 50px;
}
</style>